
/* 边框颜色 */
.border{border-style:solid; border-width:1rpx; border-color:#EDEDED !important;}
.border-l{border-left-style:solid; border-left-width:1rpx; border-left-color:#EDEDED !important;}
.border-r{border-right-style:solid; border-right-width:1rpx; border-right-color:#EDEDED !important;}
.border-t{border-top-style:solid; border-top-width:1rpx; border-top-color:#EDEDED !important;}
.border-b{border-bottom-style:solid; border-bottom-width:1rpx; border-bottom-color:#EDEDED !important;}
/* .noborder{border-right-width:0 !important; border-top-width:0 !important; border-left-width:0 !important; border-bottom-width:0 !important;} */
.noborder { border: none !important; }

/* 内边距 */
.padding-8{ padding: 8rpx; }
.padding-12{ padding: 12rpx; }
.padding-16{ padding: 16rpx; }
.padding-24{ padding: 24rpx; }
.padding-32{ padding: 32rpx; }
.padding-40{ padding: 40rpx; }

.padding-t8{ padding-top: 8rpx; }
.padding-t12{ padding-top: 12rpx; }
.padding-t16{ padding-top: 16rpx; }
.padding-t24{ padding-top: 24rpx; }
.padding-t32{ padding-top: 32rpx; }
.padding-t40{ padding-top: 40rpx; }

.padding-b8{ padding-bottom: 8rpx; }
.padding-b12{ padding-bottom: 12rpx; }
.padding-b16{ padding-bottom: 16rpx; }
.padding-b24{ padding-bottom: 24rpx; }
.padding-b32{ padding-bottom: 32rpx; }
.padding-b40{ padding-bottom: 40rpx; }

.padding-l6{ padding-left: 6rpx; }
.padding-l8{ padding-left: 8rpx; }
.padding-l12{ padding-left: 12rpx; }
.padding-l16{ padding-left: 16rpx; }
.padding-l24{ padding-left: 24rpx; }
.padding-l32{ padding-left: 32rpx; }
.padding-l40{ padding-left: 40rpx; }

.padding-r8{ padding-right: 8rpx; }
.padding-r12{ padding-right: 12rpx; }
.padding-r16{ padding-right: 16rpx; }
.padding-r24{ padding-right: 24rpx; }
.padding-r32{ padding-right: 32rpx; }
.padding-r40{ padding-right: 40rpx; }

/* 外边距 */
.margin-t8{ margin-top: 8rpx !important; }
.margin-t12{ margin-top: 12rpx !important; }
.margin-t16{ margin-top: 16rpx !important; }
.margin-t24{ margin-top: 24rpx !important; }
.margin-t32{ margin-top: 32rpx !important; }
.margin-t40{ margin-top: 40rpx !important; }

.margin-b8{ margin-bottom: 8rpx !important; }
.margin-b12{ margin-bottom: 12rpx !important; }
.margin-b16{ margin-bottom: 16rpx !important; }
.margin-b24{ margin-bottom: 24rpx !important; }
.margin-b32{ margin-bottom: 32rpx !important; }
.margin-b40{ margin-bottom: 40rpx !important; }

.margin-l8{ margin-left: 8rpx !important; }
.margin-l12{ margin-left: 12rpx !important; }
.margin-l16{ margin-left: 16rpx !important; }
.margin-l24{ margin-left: 24rpx !important; }
.margin-l32{ margin-left: 32rpx !important; }
.margin-l40{ margin-left: 40rpx !important; }

.margin-r8{ margin-right: 8rpx !important; }
.margin-r12{ margin-right: 12rpx !important; }
.margin-r16{ margin-right: 16rpx !important; }
.margin-r24{ margin-right: 24rpx !important; }
.margin-r32{ margin-right: 32rpx !important; }
.margin-r40{ margin-right: 40rpx !important; }

/* flex 布局 */
.flex {
	/* #ifndef APP-PLUS-NVUE */
	display:flex;
	/* #endif */
	flex-direction:row;
}
.flex-row{ flex-direction:row!important; }
.flex-column{ flex-direction:column!important; }
.flex-row-reverse{ flex-direction:row-reverse!important; }
.flex-column-reverse{ flex-direction:column-reverse!important; }
.flex-wrap{ flex-wrap:wrap;}
.flex-nowrap{ flex-wrap:nowrap;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.align-center{ align-items: center; }
.align-stretch{ align-items: stretch; }
.align-start{ align-items: flex-start!important; }
.align-end{ align-items: flex-end; }

.flex-1{ flex: 1; }
.flex-2{ flex: 2; }
.flex-3{ flex: 3; }
.flex-4{ flex: 4; }
.flex-5{ flex: 5; }

/* #ifndef APP-PLUS-NVUE */
.flex-shrink{ flex-shrink: 0; }
/* #endif */
.border-box{ box-sizing: border-box; }

/* 文字大小 */
.font-size-16{ font-size: 16rpx!important; }
.font-size-18{ font-size: 18rpx!important; }
.font-size-20{ font-size: 20rpx!important; }
.font-size-22{ font-size: 22rpx!important; }
.font-size-24{ font-size: 24rpx!important; }
.font-size-26{ font-size: 26rpx!important; }
.font-size-28{ font-size: 28rpx!important; }
.font-size-30{ font-size: 30rpx!important; }
.font-size-32{ font-size: 32rpx!important; }
.font-size-34{ font-size: 34rpx!important; }
.font-size-36{ font-size: 36rpx!important; }
.font-size-40{ font-size: 40rpx!important; }
.font-size-42{ font-size: 42rpx!important; }
.font-size-44{ font-size: 44rpx!important; }
.font-size-46{ font-size: 46rpx!important; }
.font-size-48{ font-size: 48rpx!important; }
.font-size-52{ font-size: 52rpx!important; }
.font-size-58{ font-size: 58rpx!important; }
.font-size-68{ font-size: 68rpx!important; }

/* 字体行高 */
.line-height-22 { line-height: 22rpx; }
.line-height-24 { line-height: 24rpx; }
.line-height-26 { line-height: 26rpx; }
.line-height-28 { line-height: 28rpx; }
.line-height-32 { line-height: 32rpx; }
.line-height-34 { line-height: 34rpx; }
.line-height-36 { line-height: 36rpx; }
.line-height-40 { line-height: 40rpx; }
.line-height-42 { line-height: 42rpx; }
.line-height-44 { line-height: 44rpx; }
.line-height-46 { line-height: 46rpx; }
.line-height-48 { line-height: 48rpx; }
.line-height-52 { line-height: 52rpx; }
.line-height-54 { line-height: 54rpx; }
.line-height-56 { line-height: 56rpx; }
.line-height-60 { line-height: 60rpx; }
.line-height-68 { line-height: 68rpx; }
.line-height-100{ line-height: 100rpx; }

/* 文字粗细和斜体 */
.font-weight-light {font-weight: 300 !important;}      /*细*/
.font-weight-lighter {font-weight: 100 !important;}    /*更细*/
.font-weight-normal { font-weight: 400 !important;}    /*正常*/
.font-weight-bold { font-weight: 700 !important;}      /*粗*/
.font-weight-bolder { font-weight: bold !important;}   /*更粗*/
.font-italic { font-style: italic !important;} /*斜体*/

/* 文字颜色 */
.text-white   		{ color: #FFFFFF; }
.text-red   		{ color: #FF0000; }
.text-primary 		{ color: #5560F7; }
.text-success 		{ color: #07CB7C; }
.text-warning 		{ color: #FFC41E; }
.text-danger  		{ color: #FD6B6D; }
.text-muted   		{ color: #B0B0B0; }
.text-light-muted   { color: #BDBDBD; }

/* 主题色 */
.primary-color		{ color: var(--primary-color) !important; }
/* 红色 */
.red-color			{ color: var(--red-color) !important; }
/* 黑色 */
.black-color		{ color: var(--black-color) !important; }
/* 灰色 */
.grey-color			{ color: var(--grey-color) !important; }


/* 字体颜色层级 */
.text-black       	{ color: #000000; }
.text-light-black 	{ color: #242835; }
.text-dark-grey   	{ color: #505462; }
.text-grey        	{ color: #AFB1B8; }
.text-light-grey  	{ color: #E9EAEF; }

/* 灰色层级 */
.text-grey-11 		{ color: #1C1C1C; }
.text-grey-21 		{ color: #363636; }
.text-grey-31 		{ color: #4F4F4F; }
.text-grey-41 		{ color: #696969; }
.text-grey-51 		{ color: #828282; }
.text-grey-61 		{ color: #9C9C9C; }
.text-grey-71 		{ color: #B5B5B5; }
.text-grey-81 		{ color: #CFCFCF; }
.text-grey-91 		{ color: #E8E8E8; }

/* 背景颜色 */
.bg-primary { background-color: #5560F7 !important;}
.bg-hover-primary:hover{ background-color: #0062cc;}
.bg-secondary { background-color: #6c757d;}
.bg-hover-secondary:hover{ background-color: #545b62;}
.bg-success { background-color: #07CB7C !important;}
.bg-hover-success { background-color: #1e7e34;}
.bg-info { background-color: #17a2b8;}
.bg-hover-info { background-color: #117a8b;}
.bg-warning { background-color: #FFC41E;}
.bg-hover-warning { background-color: #d39e00;}
.bg-danger { background-color: #FD6B6D;}
.bg-hover-danger{ background-color: #bd2130;}
.bg-light { background-color: #f8f9fa;}
.bg-hover-light{ background-color: #dae0e5 !important;}
.bg-dark { background-color: #343a40;}
.bg-hover-dark { background-color: #1d2124;}
.bg-white { background-color: #ffffff !important;}
.bg-transparent { background-color: transparent;}

/* 主题色 */
.bg-primary-color		{ background-color: var(--primary-color) !important }
/* 辅助 */
.bg-primary-line-color	{ background-color: var(--primary-line-color) !important }
/* 黄色 */
.bg-yellow-color		{ background-color: var(--yellow-color) !important }
/* 橙色 */
.bg-orange-color		{ background-color: var(--orange-color) !important }
/* 红色 */
.bg-red-color			{ background-color: var(--red-color) !important }
/* 黑色 */
.bg-black-color		{ background-color: var(--black-color) !important }
/* 灰色 */
.bg-grey-color			{ background-color: var(--grey-color) !important }
/* 浅灰 */
.bg-grey-light-color	{ background-color: var(--grey-light-color) !important }

/* 背景色 */
.bg-color			{ background-color: var(--bg-color) !important }

/* 转换行内元素 */
.block{ display: block; }
.inline-block{ display: inline-block; }

/* 文字对齐方式 */
.text-align-center { text-align: center; } 
.text-align-left { text-align: left; } 
.text-align-right { text-align: right; } 
.text-align-justify { text-align: justify; text-align-last: justify; } 
.text-decoration { text-decoration: line-through; }
/* 文本溢出隐藏 */
.text-overflow-hidden-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-overflow-hidden-2{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.text-overflow-hidden-3{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }


/* css3 动画 不支持 nvue */
/* #ifndef APP-NVUE */
.transition-all{transition:all 0.2s ease-in 0s;}
/* 使用记录 : switch-navigation2 popup */
@keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
.fade-in{animation:fade-in 150ms ease-in forwards;}
/* 使用记录 : image popup */
@keyframes fade-out{0%{opacity:1;} 100%{opacity:0;}}
.fade-out{animation:fade-out 150ms ease-out forwards;}
/* 使用记录 : popup */
@keyframes top-in{0%{transform:translateY(-1000px);} 100%{transform:translateY(0px);}}
.top-in{animation:top-in 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes top-out{0%{transform:translateY(0px);} 100%{transform:translateY(-1000px);}}
.top-out{animation:top-out 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes bottom-in{0%{transform:translateY(600px);} 100%{transform:translateY(0px);}}
.bottom-in{animation:bottom-in 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes bottom-out{0%{transform:translateY(0px);} 100%{transform:translateY(600px);}}
.bottom-out{animation:bottom-out 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes left-in{0%{transform:translateX(-600px);} 100%{transform:translateX(0px);}}
.left-in{animation:left-in 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes left-out{0%{transform:translateX(0px);} 100%{transform:translateX(-600px);}}
.left-out{animation:left-out 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes right-in{0%{transform:translateX(600px);} 100%{transform:translateX(0px);}}
.right-in{animation:right-in 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes right-out{0%{transform:translateX(0px);} 100%{transform:translateX(600px);}}
.right-out{animation:right-out 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes scale-in{0%{transform:scale(0.3,0.3);} 100%{transform:scale(1,1);}}
.scale-in{animation:scale-in 150ms linear forwards;}
/* 使用记录 : popup */
@keyframes scale-out{0%{transform:scale(1,1);} 100%{transform:scale(0.3,0.3);}}
.scale-out{animation:scale-out 150ms linear forwards;}
/* 使用记录 : page */
@keyframes rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
.rotate360{animation:rotate360 1200ms infinite linear;}
/* #endif */
